#titulo {
    display: flex;
    flex-direction: column; /* Esto asegura que los elementos <h5> y <h6> se alineen verticalmente */
    justify-content: center; /* Alinea los elementos en el centro verticalmente */
    align-items: center; /* Alinea los elementos en el centro horizontalmente */
    height: 100%; /* Asegura que el contenedor tenga altura suficiente para centrar el contenido */
}
/* Estilos para imágenes */
.logo {
    width: 60px; /* Ajusta el tamaño deseado */
    height: auto; /* Mantiene la proporción de la imagen */
}

.barcode {
    width: 200px;
    height: auto;
}

.qrcode {
    max-width: 100%;
    height: auto;
}
.graficoImg {
    max-width: 100%;
    height: auto;
}

/*Gráfico*/

.trapecio {
    width: 100px;
    justify-content: center;
    height: 50px;  /* La altura de la base del trapecio */
    border-top: solid 0px transparent;
    border-right: solid 25px transparent;
    border-bottom: solid 50px rgba(116, 116, 110, 0.7); /* La base del trapecio */
    border-left: solid 25px transparent;
    position: relative; /* Cambiar a relative para que no se desplace fuera del contenedor */
    margin: 0 auto;  /* Centrado horizontalmente */
    top: 50%; /* Esto mueve la base del trapecio a la mitad del contenedor */
    transform: translateY(-50%); /* Ajusta la posición para que la base esté alineada con el centro */
}
.trapecio p{
    text-align: center;
    color:black;
    font-size: 1.4rem;
}
.grafico {
    height: 200px;
    margin: 1rem auto;
    position: relative;
    width: 200px;
      } 
.recorte {
    border-radius: 50%;
    clip: rect(0px, 200px, 200px, 100px);
    height: 100%;
    position: absolute;
    width: 100%;
     }
.quesito {
    border-radius: 50%;
    clip: rect(0px, 100px, 200px, 0px);
    height: 100%;
    position: absolute;
    width: 100%;
    font-family: monospace;
    font-size: 1.5rem;
     }
.sombra {
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.3);
    border: 3px solid #000;
    height: 100%;
    position: absolute;
    width: 100%;
     }

#porcion1 {
    transform: rotate(0deg);
     }

#porcion1 .quesito {
    background-color: rgba(255, 255, 255, 0.7);
    transform: rotate(90deg);
     }
#porcion2 {
    transform: rotate(90deg);
     }
#porcion2 .quesito {
    background-color: rgba(116, 116, 110, 0.7);
    transform: rotate(45deg);
     }
#porcion3 {
    transform: rotate(135deg);
     }
#porcion3 .quesito {
    background-color: rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
     }
#porcion4 {
    transform:rotate(180deg);
     }
#porcion4 .quesito {
    background-color: rgba(116, 116, 110, 0.7);
    transform: rotate(90deg);
     }
#porcion5 {
    transform:rotate(270deg);
    }
#porcion5 .quesito {
    background-color: rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
    }
#porcion6 {
    transform:rotate(315deg);
    }
#porcion6 .quesito {
    background-color: rgba(116, 116, 110, 0.7);
    transform: rotate(45deg);
    }

#porcion1 .quesito:after {
    content: attr(data-rel);
    left: 38%;
    line-height: 2;
    position: absolute;
    top: 0;
    color: #000;
    transform: rotate(-90deg);
}
#porcion2 .quesito:after {
    content: attr(data-rel);
    left: 42%;
    line-height: 1.2;
    position: absolute;
    top: 0;
    color: #000;
    transform: rotate(-135deg);
}
#porcion6 .quesito:after {
    content: attr(data-rel);
    left: 40%;
    position: absolute;
    top: 0;
    color: #000;
    transform: rotate(0deg);
}

/*fin gráfico*/